<template>
  <div class="panel">
    <div v-if="title" class="panel-title">
      {{title}}
    </div>
    <div class="panel-content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  }
}
</script>

<style lang="scss">
  .panel {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
    &-title {
      padding: 20px;
      border-bottom: 1px solid #ccc;
      font-size: 18px;
      font-weight: bold;
    }
    &-content {
      padding: 20px;
    }
  }
</style>
